<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../../public/css/dataStatistics/charts.css">
  <link rel="stylesheet" href="../../public/css/index.css">
</head>
<body>
<!--外部容器-->
<div class="top-bar-wrapper">
  <!-- 中间主体部分容器 -->
  <div class="top-bar">

    <!-- 网站的logo -->
    <h1 class="logo">
      <!-- 此处建议写上网站首页的地址 -->
      <a href="/">
        <img src="../../public/resources/logo.png">
        <span>成为更好的自己</span>
      </a>
    </h1>


    <!-- 菜单栏 -->
    <div class="left-menu">
      <!-- 创建菜单图标 -->
      <ul class="menu-icon">
        <li></li>
        <li></li>
        <li></li>
      </ul>


      <!-- 创建菜单 -->
      <ul class="nav">
        <!-- 这里都要写在超链接里面 -->
        <!-- 超链接的地址，写各个页面的地址 -->
        <li><a href="./../myPlan/myTodo.html">个人计划</a></li>
        <li><a href="./../note-program/index.html">我的笔记</a></li>
        <li><a href="./../minder/mind.html">思维导图</a></li>
        <li><a href="./../dataStatistics/dataStatistics.html">数据统计</a></li>
        <li><a href="./../square/square.html">广场</a></li>
      </ul>

    </div>

    <!-- 用户信息 -->
    <div class="user-info">
      <!-- 这里是可以跳转到用户信息详细设置页的，写用户信息详细设置页的地址 -->
      <a href="javascript:void(0);" id="turnUserInfo">
        <img src="../../public/resources/user-pic.jpg" alt="用户头像">
      </a>
    </div>
  </div>
</div>
<div class="l-col">
  <h2 class="title header">APP使用情況统计</h2>
  <div id="info">
    <div class="w-box"><p>今日计划完成数</p>
      <h2>12/24</h2></div>
    <div class="w-box"><p>发布动态数</p>
      <h2>5</h2></div>
    <div class="m-box"><p>累计使用天数</p>
      <h2>21</h2></div>
    <div class="m-box"><p>打卡天数</p>
      <h2>14</h2></div>
    <div class="m-box"><p>获得点赞数</p>
      <h2>100</h2></div>
    <div class="m-box"><p>评论数</p>
      <h2>20</h2></div>
  </div>
</div>
<div class="l-col">
  <h2 class="title header">计划进度</h2>
  <p class="sub-title">今日计划</p>
  <div id="progress-view1"></div>
  <p class="sub-title">长期计划</p>
  <div id="progress-view2"></div>
</div>

<div class="l-col">
  <h2 class="title header">本周计划完成情况</h2>
  <div id="water-ball-view"></div>
</div>
<div class="row">
  <div class="m-col">
    <h2 class="title header">本月数据统计</h2>
    <div id="calendar-view"></div>
  </div>
  <div class="s-col" style="height: auto;margin-top: 0">
    <h2 class="title">时间轴</h2>
    <div id="time-line" style="height: 600px;padding-bottom: 20px;">

      <div class="item">
        <div class="point"></div>
        <div>
          <p class="content">发表计划-读书</p>
          <p class="date"><i>2021/08/02</i></p>
        </div>
      </div>
      <div class="item">
        <div class="point"></div>
        <div>
          <p class="content">发表计划-读书</p>
          <p class="date"><i>2021/08/02</i></p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="s-col">
    <h2 class="title">我的笔记</h2>
    <div id="pie-view"></div>
  </div>
  <div class="s-col">
    <h2 class="title">我的状态</h2>
    <div id="radar-view"></div>
  </div>
  <div class="s-col">
    <h2 class="title">我的得分</h2>
    <div id="score-view"></div>
  </div>
</div>
<script type="text/javascript" src="../../public/js/dataStatistics/util/Util.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/data/ConstData.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/charts/PieView.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/charts/RadarView.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/charts/ScoreView.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/charts/ProgressView.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/charts/WaterBallView.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/charts/CalendarView.js"></script>
<script type="text/javascript" src="../../public/js/dataStatistics/dom/data.js"></script>
<script src="../../public/js/index.js"></script>
</body>
</html>
